<template>
	<header class="login-header">
		<div style="display: flex; align-items: center">
			<img src="https://10531726.s21i.faiusr.com/4/ABUIABAEGAAgksbJtwYotsunmAcwiAM4NQ.png" alt="logo" class="logo" />
			<div style="width: 2rem"></div>
			<span :style="{ visibility: showBtn ? 'visible' : 'hidden' }" @click="handleLogin" class="login-link">返回登录 </span>
		</div>

		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
			<div class="layout-navbars-breadcrumb-user-icon">
				<i
					class="iconfont"
					:class="state.disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'"
					:title="$t('message.user.title1')"
				></i>
			</div>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item command="zh-cn" :disabled="state.disabledI18n === 'zh-cn'">简体中文</el-dropdown-item>
					<el-dropdown-item command="en" :disabled="state.disabledI18n === 'en'">English</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</header>
</template>

<script setup lang="ts" name="layoutBreadcrumbUser">
import other from '/@/utils/other';
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import { Local } from '/@/utils/storage';
import { reactive, onMounted } from 'vue';
import { useThemeConfig } from '/@/stores/themeConfig';

const props = defineProps({
	showBtn: {
		type: Boolean,
		default: false,
	},
});

// 定义变量内容
const { locale, t } = useI18n();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const router = useRouter();
const state = reactive({
	disabledI18n: 'zh-cn',
});

// 返回登录
const handleLogin = () => {
	router.push({ path: '/login' });
};

// 语言切换
const onLanguageChange = (lang: string) => {
	Local.remove('themeConfig');
	themeConfig.value.globalI18n = lang;
	Local.set('themeConfig', themeConfig.value);
	locale.value = lang;
	other.useTitle();
	initI18nOrSize('globalI18n', 'disabledI18n');
};

// 初始化组件大小/i18n
const initI18nOrSize = (value: string, attr: string) => {
	(<any>state)[attr] = Local.get('themeConfig')[value];
};

// 页面加载时
onMounted(() => {
	if (Local.get('themeConfig')) {
		initI18nOrSize('globalI18n', 'disabledI18n');
	}
});
</script>

<style scoped>
.login-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.8rem 2.5rem;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	z-index: 10;
}

.logo {
	height: 32px;
}

.layout-navbars-breadcrumb-user-icon {
	cursor: pointer;
	color: #606266;
	font-size: 18px;
	padding: 5px;
	transition: all 0.3s;
}

.layout-navbars-breadcrumb-user-icon:hover {
	color: #1890ff;
}

.login-link {
	color: #1890ff;
	cursor: pointer;
	font-size: 1.3rem;
	font-weight: bold;
}
</style>
